/*
 * @Date: 2025-09-08 16:29:31
 * @Auth: 873768511@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2025-10-06 21:49:17
 * @FilePath: \corpus\src\pages\resourceManagement\list\index.tsx
 */

import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Tabs } from 'antd';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import AddCorpus from './component/AddCorpus';
import AddModal from './component/AddModal';
import AddModalKnowledge from './component/AddModalKnowledge';
import Corpus from './component/Corpus';
import CreateKnowledge from './component/CreateKnowledge';
import DetailDrawer from './component/DetailDrawer';
import Knowdege from './component/Knowdege';
import ProTableContent from './component/ProTable';
import { default as Container, default as hooks } from './hooks';
import styles from './index.less';

function Index() {
  const { setTabKey, total, tabKey, setResourceData, deleteResourceGroupData } =
    hooks.useContainer();
  const refContent = useRef<any>();

  const { setName, actionRef, setSelectedKeys } = useModel('useTree', (model) => {
    return {
      setName: model.setName,
      setSelectedKeys: model.setSelectedKeys,
      name: model.name,
      actionRef: model.actionRef,
    };
  });
  const [height, setHeight] = useState(refContent?.current?.clientHeight);

  useEffect(() => {
    return () => {
      setName('');
      setSelectedKeys([]);
    };
  }, []);

  useLayoutEffect(() => {
    setHeight(refContent.current.clientHeight);
  }, [total]);
  return (
    <PageContainer
      header={{
        title: false,
        ghost: true,
        // breadcrumb: {
        //   items: [
        //     {
        //       path: '',
        //       title: '料库资源管理',
        //     },
        //   ],
        // },
      }}
    >
      <div style={{ width: '100%' }}>
        {/* <div className={styles.wrapperLeft}>
          <Category height={height} />
        </div> */}
        <div ref={refContent} className={styles.wrapperRight}>
          {/* <div style={{ marginBottom: '20.0px' }} className={styles.container}>
            <BasicInfo />
          </div> */}
          <Card>
            <Tabs
              onChange={(e) => {
                setTabKey(e);
              }}
              items={[
                {
                  label: `原始数据资源`,
                  key: 'file',
                },

                {
                  label: `语料库`,
                  key: 'corpus',
                },
                {
                  label: `知识库`,
                  key: 'knowledge',
                },
              ]}
            ></Tabs>
            {tabKey === 'file' ? (
              <ProTableContent />
            ) : tabKey === 'knowledge' ? (
              <Knowdege />
            ) : (
              <Corpus />
            )}
            <AddModal />
            <AddModalKnowledge />
            <AddCorpus />
            <DetailDrawer />
            <CreateKnowledge />

            {/* <KnowledgeDawer/> */}
          </Card>
        </div>
      </div>
    </PageContainer>
  );
}

export default () => {
  return (
    <Container.Provider>
      <Index />
    </Container.Provider>
  );
};
